<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>es6型特性</title>
	</head>
	<body>
		<button onclick="onTest()" style="font-size: 20px;">点击我测试看看</button>
		<button onclick="onTest2()" style="font-size: 20px;margin: 20px;">点击我测试看看</button>

		<button onclick="onTest3()" style="font-size: 20px;margin: 20px;">点击我测试模板对象拼接</button>

		<div id="text"></div>
		
		<button onclick="onTest4()" style="font-size: 20px;margin: 20px;">点击我测试箭头函数</button>
		
		<button onclick="onTest5()" style="font-size: 20px;margin: 20px;">点击我测试默认参数传递</button>
		
		<button onclick="onTest6()" style="font-size: 20px;margin: 20px;">点击我测试不确定参数传递</button>
		
		<button onclick="onTest7()" style="font-size: 20px;margin: 20px;">点击我测试数组解构</button>
		
		<button onclick="onTest8()" style="font-size: 20px;margin: 20px;">点击我测试对象解构</button>
		
		<button onclick="onTest9()" style="font-size: 20px;margin: 20px;">点击我测试字符串解构</button>
		
		<button onclick="onTest10()" style="font-size: 20px;margin: 20px;">点击我测试函数解构</button>
		
		<button onclick="onTestClass()" style="font-size: 20px;margin: 20px;">点击我测试类</button>
		
		<button onclick="onTestGenerator()" style="font-size: 20px;margin: 20px;">点击我测试Generator</button>
		
		<button onclick="onTestPromise()" style="font-size: 20px;margin: 20px;">点击我测试Promise</button>
		
		<button onclick="onTestAsync()" style="font-size: 20px;margin: 20px;">点击我测试Async</button>
		
		<button onclick="onTestWait()" style="font-size: 20px;margin: 20px;">点击我测试Wait</button>

		<script>
			let num = 1;
			var bbbb;
			const ccc = 11111;

			function onTest() {
				//num = 10;
				//ccc = 111;
				bbbb = "sdfsssgs";

				let num = 123; {
					var a = "我是一个变量a";

				}
				const b = "我是一个常量";
				let c = "我是一个为变量";
				console.log(a)
				console.log(b)
				console.log(c)
				console.log(num)
			}

			function onTest2() {
				console.log(num)
			}

			function onTest3() {
				var name = "张三丰";
				var age = 18;
				var gender = "男";
				// var itemHtml = '<div class="user_info">' +
				// 	'<div class="name">' + name + '</div>' +
				// 	'<div class="age">' + age + '</div>' +
				// 	'<div class="gender">' + gender + '</div>' +
				// 	'</div>';

				var itemHtml = `<div class="user_info">
									<div class="name">${name}</div>
									<div class="age">${age}</div>
									<div class="gender">${gender}</div>
								</div>`;

				// console.log("sfsdfsdfdsf

				// ")	

				//与普通字符串相比，模板字符串可以书写多行，模板中所有的空格、新行、缩进等都会原样输出在生成的字符串中
				console.log(`sdfsfsfsf
						sfddsf
						sdfsfs
						dfgfgd
						dfgdg`)

				var textDiv = document.getElementById('text');
				textDiv.innerHTML = itemHtml;
				
			}
			
			function onTest4(){
				var list = [1,4,7,8,2,45,6];
				// list.forEach(function(item,index){
				// 	console.log('孩子=' + item)
				// })
				list.forEach((item,index,arr) => {
					console.log('孩子=' + item)
					console.log('属于数组：' + arr)
				});
				
				// setTimeout(function(){
				// 	console.log('我是1秒后输出的');
				// 	_this.qqq = "wwwwwwwwww";
				// 	console.log(qqq);
				// },1000)
			}
			
			function onTest5(){
				count();
				count(9);
			}
			
			function count(num = 3){
				console.log('num=' + num)
			}
			
			function onTest6(){
				countx(1,3.5,6)
				countx(4,7,9,12,54,26)
			}
			
			function countx(...params){
				let sum = 0;
				for(let n of params){
					console.log(n)
					sum += n
				}
				console.log('sum=' + sum)
			}
			
			function onTest7(){
				var mlist = [45,26,27,86];
				var [a,b,c,d] = mlist;
				console.log(a)
				console.log(b)
				console.log(c)
				console.log(d)
			}
			
			function onTest8(){
				var foo = {
					name:'loop',
					age:18,
					gender:'女'
				}
				var {name,age,gender} = foo;
				console.log('name='+name)
				console.log('age='+age)
				console.log('gender='+gender)
			}
			
			function onTest9(){
				var [h,j,k,l] = "java";
				console.log('h='+h)
				console.log('j='+j)
				console.log('k='+k)
			}
			
			function onTest10(){
				test10([4,78]);
			}
			
			function test10([x,y]){
				console.log(x,y)
			}
			
			function onTestClass(){
				var Cat = function(){};
				 Cat.prototype.eat = function(){
					 console.log('es5 eat')
				 }
				 Cat.doing = function(){
					 console.log('es5 doing')
				 }
				 
				 let cat = new Cat();
				 cat.eat();
				 Cat.doing();
				 
				 class Dog{
					 constructor(){
						 
					 }
					 eat(){
						  console.log('es6 dog eat')
					 }
					 static jiao(){
						  console.log('es6 dog jiao')
					 }
				 }
				 
				 let dog = new Dog();
				 dog.eat();
				 Dog.jiao()
			}
			
			function onTestGenerator(){
				//let generator = generateNumbers();
				 
				//console.log(generator.next());
				 
				// console.log(generator.next());
				 
				// console.log(generator.next());
				 
				// console.log(generator.next());
				
				
			}
			
			function* generateNumbers() {
			 
			  yield 1;
			 
			  yield 2;
			 
			  yield 3;
			 
			}
			
			function onTestPromise(){
				// 使用fetchData函数
				fetchData('https://api.example.com/data')
				    .then(data => {
				        console.log('Data retrieved:', data);
				    })
				    .catch(error => {
				        console.error('Failed to fetch data:', error);
				    });
			}
			 
			 
			 function fetchData(url) {
			     // 返回一个新的Promise
			     return new Promise((resolve, reject) => {
			         // fetch 是JavaScript中的一个内建函数，用于发起网络请求。它是Web API的一部分，可用于从网络获取资源，如文档或JSON数据。fetch 函数返回一个 Promise 对象，可以用来处理HTTP响应并访问其内容。
			         fetch(url)
			             .then(response => {
							 console.log(response)
			                 if (response.ok) { // 检查响应状态
			                     return response.json(); // 解析JSON数据
			                 } else {
			                     throw new Error('Network response was not ok.');
			                 }
			             })
			             .then(data => resolve(data)) // 成功时，解析的数据通过resolve传递
			             .catch(error => reject(error)); // 失败时，错误通过reject传递
			     });
			 }
			 
			 function onTestAsync(){
				 let zzz = fetchDatax().then(res => {
					 console.log(res)
				 }).catch(err => {
					 console.log(err)
				 })
				
				let sss = fetchDataxx().then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
				//textCount()
				
				
			 }
			 
			 const textCount = () => {
				 return 'good'
			 }
			
			async function fetchDatax() {
			    return "Data";
			}
			// 等价于
			function fetchDataxx() {
			    return Promise.resolve("Data");
			}
			
			function onTestWait(){
				
				let zzz = fetchDatax().then(res => {
									 console.log(res)
				}).catch(err => {
									 console.log(err)
				})
				
				asyncFunction();
				fn()
			}

			async function asyncFunction() {
			    try {
			        const data = await fetchDatax();
			        console.log(data);
			    } catch (error) {
			        console.error(error);
			    }
			}

// async/await 写法
function a(time){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      console.log('async/await写法' + time);
      resolve('async/await返回数据')},time)
  })
}
async function fn() {
  const res1 = await a(1000)
  const res2 = await a(2000)
  const res3 = await a(3000)
  const res4 = await a(4000)
  const res5 = await a(5000)
}
			
		</script>
	</body>
</html>
